<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <!--                <div class="chart-data">{{userCount | format}}</div>-->
                <div class="chart-data">999,999</div>
                <v-chart :option="searchUserOption"/>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <!--                <div class="chart-data">{{searchCount | format}}</div>-->
                <div class="chart-data">66,666</div>
                <v-chart :option="searchNumberOption"/>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column prop="rank" label="排名"/>
                <el-table-column prop="keyword" label="关键词"/>
                <el-table-column prop="count" label="总搜索量"/>
                <el-table-column prop="users" label="搜索用户数"/>
                <el-table-column prop="range" label="搜索占比"/>
              </el-table>
              <el-pagination
                layout="prev, pager, next,total"
                :total="tableData.length"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                @current-change="onPageChange"
                @size-change="handleSizeChange"
                :current-page="currentPage"
                background
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small" @change="onCategoryChange">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :option="categoryOptions"/>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomView',
  data() {
    return {
      searchUserOption: {},
      searchNumberOption: {},
      categoryOptions: {},
      currentPage: 1,
      total: 7,
      pageSize: 5,
      pageSizes: [2, 4, 6],
      radioSelect: '品类',
      tableData: [
        {
          rank: 1,
          keyword: '干饭',
          count: 66666,
          users: 55555,
          range: '10%'
        }, {
          rank: 2,
          keyword: '睡觉',
          count: 666,
          users: 55551,
          range: '10%'
        }, {
          rank: 3,
          keyword: 'code',
          count: 166666,
          users: 55555,
          range: '10%'
        }, {
          rank: 4,
          keyword: 'letcode',
          count: 23333,
          users: 1555,
          range: '10%'
        }, {
          rank: 5,
          keyword: 'wechat',
          count: 616666,
          users: 552555,
          range: '10%'
        }, {
          rank: 6,
          keyword: '肌肉金轮',
          count: 662666,
          users: 552555,
          range: '10%'
        }, {
          rank: 7,
          keyword: 'bili',
          count: 6661166,
          users: 551555,
          range: '10%'
        }, {
          rank: 8,
          keyword: '干饭',
          count: 666366,
          users: 555355,
          range: '10%'
        }
      ],
      pieData: [
        {
          legendname: '川菜',
          value: 3000,
          percent: '30%'
        },
        {
          legendname: '粤菜',
          value: 2000,
          percent: '20%'
        },
        {
          legendname: '湘菜',
          value: 1500,
          percent: '15%'
        },
        {
          legendname: '东北菜',
          value: 2500,
          percent: '25%'
        },
        {
          legendname: '赣菜',
          value: 800,
          percent: '8%'
        },
        {
          legendname: '外国菜',
          value: 200,
          percent: '8%'
        }
      ],
      categoryData: [
        {
          legendname: '可口可乐',
          value: 300,
          percent: '30%'
        },
        {
          legendname: 'KFC',
          value: 200,
          percent: '20%'
        },
        {
          legendname: 'Lukic',
          value: 150,
          percent: '15%'
        },
        {
          legendname: 'bergKing',
          value: 250,
          percent: '25%'
        },
        {
          legendname: '神经烧鸭',
          value: 80,
          percent: '8%'
        },
        {
          legendname: '盖马饭',
          value: 20,
          percent: '8%'
        }
      ]
    }
  },
  mounted() {
    this.searchUserOption = this.renderLineChart('users')
    this.searchNumberOption = this.renderLineChart('count')
    this.categoryOptions = this.renderPieChart()
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page
    },
    handleSizeChange(size) {
      this.pageSize = size
    },
    onCategoryChange(type) {
      this.radioSelect = type
     this.categoryOptions = this.renderPieChart()
    },
    renderLineChart(key) {
      const data = []
      const axis = []
      this.tableData.forEach(item => data.push(item[key]))
      this.tableData.forEach(item => axis.push(item.keyword))
      return {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: axis
        },
        yAxis: {
          show: false
        },
        tooltip: {},
        series: [{
          type: 'line',
          data,
          areaStyle: {
            color: 'rgba(95,187,255,.5)'
          },
          lineStyle: {
            color: 'rgb(95,187,255)'
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          left: 0,
          bottom: 0,
          right: 0
        }
      }
    },
    renderPieChart() {
      const data = []
      const str = []
      if (this.radioSelect === '商品') {
        this.categoryData.forEach(item => {
          item.name = `${item.legendname} | ${item.percent}`
          data.push(item)
        })
        str[0] = '1000'
      } else {
        this.pieData.forEach(item => {
          item.name = `${item.legendname} | ${item.percent}`
          data.push(item)
        })
        str[0] = '10000'
      }
      return {
        title: [
          {
            text: `${this.radioSelect}分布`,
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          {
            text: '累计订单量',
            x: '34.5%',
            y: '42.5%',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtext: str,
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center'
          }
        ],
        series: [
          {
            name: '品类分布',
            type: 'pie',
            data: data,
            label: {
              normal: {
                show: true,
                position: 'outter',
                formatter: function (params) {
                  return params.data.legendname
                }
              }
            },
            center: ['35%', '50%'],
            radius: ['45%', '60%'],
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            clockwise: false,
            itemStyle: {
              borderWidth: 4,
              borderColor: '#fff'
            }
          }
        ],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 250,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            const str = params.seriesName + '<br />' +
              params.marker + params.data.legendname + '<br />' +
              '数量：' + params.data.value + '<br />' +
              '占比：' + params.data.percent
            return str
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;

    &:first-child {
      padding: 0 10px 0 0;
    }

    &:last-child {
      padding: 0 0 0 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height:500px;

      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;

        .chart {
          flex: 1;
          padding: 0 10px;

          .chart-title {
            color: #999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}

/deep/ .el-card__header {
  border: none;
}

</style>
